<template>
  <p-modal
    :title="handle === 'add'?'新增':'编辑'"
    :width="950"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'siteLineListModal'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
      <div class="section">
        <p-form-model-item label="线号" prop="lineNo">
          <p-input
            placeholder="请输入内容"
            v-model="form.lineNo"
          />
        </p-form-model-item>
        <p-form-model-item label="线缆颜色" prop="cableColor">
          <p-select v-model="form.cableColor">
            <p-select-option :value="item.value" v-for="(item, index) in cableColorList" :key="item.value">
              {{item.label}}
            </p-select-option>
          </p-select>
        </p-form-model-item>
        <p-form-model-item label="A长度" prop="lengthA">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthA"
          />
        </p-form-model-item>
        <p-form-model-item label="B长度" prop="lengthB">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthB"
          />
        </p-form-model-item>
        <p-form-model-item label="C长度" prop="lengthC">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthC"
          />
        </p-form-model-item>
        <p-form-model-item label="D长度" prop="lengthD">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthD"
          />
        </p-form-model-item>
        <p-form-model-item label="E长度" prop="lengthE">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthE"
          />
        </p-form-model-item>
        <p-form-model-item label="F长度" prop="lengthF">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthF"
          />
        </p-form-model-item>
        <p-form-model-item label="L1长度" prop="lengthLOne">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthLOne"
          />
        </p-form-model-item>
      </div>
      <div class="section">
        <p-form-model-item label="名称" prop="lineName">
          <p-input
            placeholder="请输入内容"
            v-model="form.lineName"
          />
        </p-form-model-item>
        <p-form-model-item label="数量" prop="qty">
          <p-input
            placeholder="请输入内容"
            v-model="form.qty"
          />
        </p-form-model-item>
        <p-form-model-item label="A下限值" prop="lengthADown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthADown"
          />
        </p-form-model-item>
        <p-form-model-item label="B下限值" prop="lengthBDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthBDown"
          />
        </p-form-model-item>
        <p-form-model-item label="C下限值" prop="lengthCDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthCDown"
          />
        </p-form-model-item>
        <p-form-model-item label="D下限值" prop="lengthDDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthDDown"
          />
        </p-form-model-item>
        <p-form-model-item label="E下限值" prop="lengthEDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthEDown"
          />
        </p-form-model-item>
        <p-form-model-item label="F下限值" prop="lengthFDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthFDown"
          />
        </p-form-model-item>
        <p-form-model-item label="L1下限值" prop="lengthLOneDown">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthLOneDown"
          />
        </p-form-model-item>
      </div>
      <div class="section">
        <p-form-model-item label="电缆型号" prop="cableModel">
          <p-input
            placeholder="请输入内容"
            v-model="form.cableModel"
          />
        </p-form-model-item>
        <p-form-model-item label="L2长度" prop="lengthTwo">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthTwo"
          />
        </p-form-model-item>
        <p-form-model-item label="A上限值" prop="lengthAUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthAUp"
          />
        </p-form-model-item>
        <p-form-model-item label="B上限值" prop="lengthBUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthBUp"
          />
        </p-form-model-item>
        <p-form-model-item label="C上限值" prop="lengthCUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthCUp"
          />
        </p-form-model-item>
        <p-form-model-item label="D上限值" prop="lengthDUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthDUp"
          />
        </p-form-model-item>
        <p-form-model-item label="E上限值" prop="lengthEUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthEUp"
          />
        </p-form-model-item>
        <p-form-model-item label="F上限值" prop="lengthFUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthFUp"
          />
        </p-form-model-item>
        <p-form-model-item label="L1上限值" prop="lengthLOneUp">
          <p-input
            placeholder="请输入内容"
            v-model="form.lengthLOneUp"
          />
        </p-form-model-item>
      </div>
    </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import pick from "lodash.pick";

export default {
  name: "siteLineListModal",
  components: {
  },
  data() {
    return {
      width: 500,
      visible: false,
      model: {},
      handle: 'add',
      confirmLoading: false,
      form: {
        lineNo: '',
        lineName: '',
        cableModel: '',
        cableColor: '1',
        lengthTwo: '',
        lengthA: '',
        lengthADown: '',
        lengthAUp: '',
        lengthB: '',
        lengthBDown: '',
        lengthBUp: '',
        lengthC: '',
        lengthCDown: '',
        lengthCUp: '',
        lengthD: '',
        lengthDDown: '',
        lengthDUp: '',
        lengthE: '',
        lengthEDown: '',
        lengthEUp: '',
        lengthF: '',
        lengthFDown: '',
        lengthFUp: '',
        lengthLOne: '',
        lengthLOneDown: '',
        lengthLOneUp: '',
        qty: '',
      },
      cableColorList: [
        {
          value: '1',
          label: '蓝色',
        },
        {
          value: '2',
          label: '红色',
        },
      ],
      rules: {
        lineNo: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        lineName: [
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        cableModel: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        cableColor: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        lengthA: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthAUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthADown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthB: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthBDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthBUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthC: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthCDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthCUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthD: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthDDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthDUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthE: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthEDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthEUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthF: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthFDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthFUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthL: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthLOneDown: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthLOneUp: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthLOne: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        lengthTwo: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        qty: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
      },
    };
  },
  watch: {
    visible(val){
      if ( !val ){
        this.$refs.ruleForm.resetFields();
      }
    },
  },
  created() {},
  methods: {
    handleOk(){
      const that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          if ( that.handle === 'add' ){
            that.form.id = new Date().getTime();
            that.$parent.options.push(_.cloneDeep(that.form));
          }else {
            const index = that.$parent.options.findIndex( el => el.id === that.form.id);
            that.$parent.options.splice(index,1,_.cloneDeep(that.form));
          }
          that.$parent.optionsCopy = _.cloneDeep(that.$parent.options);
          that.visible = false;
        }
      });
    },
    handleCancel(){
      this.visible = false;
    },
  },
};
</script>

<style lang="less">
  .siteLineListModal {
    .poros-form{
      display: flex;
    }
    .poros-form .poros-form-item{
      display: flex;
    }
     .poros-form-item-label{
       width: 110px;
     }
  }
</style>

